<template>
  <div id="new-catch-flight-order" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-1">
          <router-link to="/h5/tools/catches">(机票)追位</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">新建</li>
        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="pnr !== null && editing">
      <div class="card-body bg-info text-white py-1">行程信息</div>
      <div class="card-body">
        <dl class="row">
          <a
            href="javascript:void(0);"
            @click.stop="addPnrFlt()"
            class="btn btn-sm btn-success float-end"
            >增加航段</a
          >
        </dl>
        <dl class="row" v-for="(info, index) in pnr.flights" :key="index">
          <dt class="col-4 text-end">航班号</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              maxlength="10"
              placeholder="航班号"
              v-model.trim="info.flight.flightNo"
            />
          </dd>
          <dt class="col-4 text-end">起飞日期</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              maxlength="15"
              placeholder="示例：2017-01-09"
              v-model.trim="info.flight.ddate"
            />
          </dd>
          <dt class="col-4 text-end">舱位</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              maxlength="2"
              placeholder="舱位"
              v-model.trim="info.flight.subclass"
            />
          </dd>
          <dt class="col-4 text-end">出发机场</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              maxlength="3"
              placeholder="出发机场"
              v-model.trim="info.flight.dport"
              size="10"
            />
          </dd>
          <dt class="col-4 text-end">到达机场</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              maxlength="3"
              placeholder="到达机场"
              v-model.trim="info.flight.aport"
              size="10"
            />
            <a
              href="javascript:void(0)"
              @click.stop="deletePnrFlt(index)"
              class="btn btn-sm btn-danger float-end mt-2"
              >删除</a
            >
          </dd>
        </dl>
      </div>

      <div class="card-body bg-info text-white py-1">乘机人信息</div>
      <div class="card-body">
        <div class="row mb-2">
          <div class="col">
            <a
              href="javascript:void(0);"
              @click.stop="addPnrPsg()"
              class="btn btn-sm btn-success"
              >增加乘机人</a
            >
          </div>
          <div class="col">
            <a href="javascript:void(0)" @click.stop="selectAllPsg()">全选</a>
            /
            <a href="javascript:void(0)" @click.stop="unselectAllPsg()">全否</a>
          </div>
        </div>
        <dl class="row" v-for="(info, index) in pnr.passengers" :key="index">
          <dt class="col-4 text-end">姓名</dt>
          <dd class="col-8">
            <input type="checkbox" v-model="info.selected" />
            <input
              type="text"
              class="form-control"
              placeholder="乘机人姓名"
              v-model.trim="info.psgName"
            />
          </dd>
          <dt class="col-4 text-end">证件号</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              placeholder="证件号"
              v-model.trim="info.idNo"
            />
          </dd>
          <dt class="col-4 text-end">证件类型</dt>
          <dd class="col-8">
            <select
              class="form-select"
              v-model.number="info.idType"
              placeholder="证件类型"
            >
              <option :value="idTypeInfo.idType" v-for="idTypeInfo of idTypes">
                {{ idTypeInfo.idName }}
              </option>
            </select>
          </dd>
          <dt class="col-4 text-end">常旅客号</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              placeholder="常旅客号"
              v-model.trim="info.ffpNo"
            />
          </dd>
          <dt class="col-4 text-end">手机</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              placeholder="手机号"
              v-model.trim="info.mobile"
            />
          </dd>
          <dt class="col-4 text-end">乘客类型</dt>
          <dd class="col-8">
            <select
              class="form-select"
              v-model.number="info.psgType"
              placeholder=""
            >
              <option value="0">成人</option>
              <option value="1">儿童</option>
              <option value="2">婴儿</option>
            </select>
            <a
              href="javascript:void(0)"
              @click.stop="deletePnrPsg(index)"
              class="btn btn-sm btn-danger float-end"
              >删除</a
            >
          </dd>
        </dl>
      </div>

      <div class="card-body bg-info text-white py-1">其它</div>
      <div class="card-body py-1">
        <dl class="row">
          <dt class="col-4 text-end">PNR（现有）</dt>
          <dd class="col-8">
            <input type="text" class="form-control" v-model.trim="pnr.pnrNo" />
            <span class="text-info small"
              >记录编号，行程信息和乘机人信息，必填其一</span
            >
          </dd>
          <dt class="col-4 text-end">监控类型</dt>
          <dd class="col-8">
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="monitoring"
              />
              <label class="form-check-label">无</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="monitoring"
              />
              <label class="form-check-label">HX/NO提醒</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="2"
                v-model.number="monitoring"
              />
              <label class="form-check-label">追位</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="3"
                v-model.number="monitoring"
              />
              <label class="form-check-label">关舱提醒（Q状态）</label>
            </div>
          </dd>
          <dt class="col-4 text-end">类型</dt>
          <dd class="col-8">
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="intlTicket"
              />
              <label class="form-check-label">国内航班</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="intlTicket"
              />
              <label class="form-check-label">国际航班</label>
            </div>
          </dd>
          <dt class="col-4 text-end">授权Office</dt>
          <dd class="col-8">
            <input
              type="text"
              class="form-control"
              v-model.trim="authOfficeNo"
            />
          </dd>
          <dt class="col-4 text-end">备注</dt>
          <dd class="col-8">
            <input type="text" class="form-control" v-model.trim="remark" />
          </dd>
          <dt class="col-4 text-end">监控时间</dt>
          <dd class="col-8">
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="dayAndNight"
              />
              <label class="form-check-label">工作时间</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="dayAndNight"
              />
              <label class="form-check-label">日夜兼程</label>
            </div>
          </dd>
        </dl>
      </div>

      <div class="card-footer text-center">
        <button
          type="button"
          class="btn btn-primary"
          :disabled="btnDisabled"
          @click.stop.prevent="createFlightOrder()"
        >
          保存
        </button>
      </div>
    </template>
  </div>
</template>

<script>
import { createCatchOrder, searchOrderDetail } from "@/api/catch-order.js";
import { processPnrFlightContent } from "@/api/flight-change.js";
import MyDatePicker from "@/components/my-datepicker.vue";
import $ from "jquery";

export default {
  components: {
    MyDatePicker,
  },
  data() {
    return {
      editing: false,
      pnrDetail: "",
      pnr: null,

      copyId: 0,

      remark: "",
      linkman: "",
      linkPhone: "",
      intlTicket: -1,
      monitoring: 0,
      dayAndNight: 0,
      authOfficeNo: "",
      btnDisabled: false,
    };
  },
  computed: {
    idTypes() {
      return this.$store.state.idTypes;
    },
    flightCount: function () {
      if (this.pnr === null) {
        return 0;
      }

      return this.pnr.flights.length;
    },
    psgCount: function () {
      if (this.pnr === null) {
        return 0;
      }

      let count = 0;

      for (const psg of this.pnr.passengers) {
        if (psg.selected === false) continue;

        count++;
      }

      return count;
    },
    psgTotal: function () {
      if (this.pnr === null) {
        return 0;
      }
      return this.pnr.passengers.length;
    },
  },
  mounted: function () {
    this.inputPnr();

    let id = parseInt(this.$route.query.copyId);
    if (!isNaN(id)) {
      this.copyId = id;
      this.getOriginalOrderDetail(this.copyId);
    }
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", {
        loading: false,
      });
    },
    createFlightOrder: function () {
      const params = {
        pnrNo: this.pnr.pnrNo,
        linkman: this.linkman,
        linkPhone: this.linkPhone,
        intlTicket: this.intlTicket,
        authOfficeNo: this.authOfficeNo,
        monitoring: this.monitoring,
        dayAndNight: this.dayAndNight,
        remark: this.remark,
        flights: this.pnr.flights,
        passengers: this.pnr.passengers,
      };

      const jsonParams = JSON.stringify(params);

      this.showLoading("保存中");

      createCatchOrder(
        jsonParams,
        (jsonResult) => {
          if (jsonResult.status !== "OK") {
            this.showErrMsg(jsonResult.errmsg, "danger");
          } else {
            // 根据条件判断是否跳转，还是停在此页
            if (this.psgCount === this.psgTotal) {
              this.showErrMsg("保存成功");
              this.pnr = null;
              this.pnrDetail = "";
              this.$router.push("/catch/orders/");
            } else {
              // 留在当前页面，继续保存
              this.showErrMsg("保存成功，请继续保存余下的乘机人");
              let b = true;
              while (b) {
                b = false;
                for (let i = 0; i < this.pnr.passengers.length; i++) {
                  if (this.pnr.passengers[i].selected) {
                    b = true;
                    this.deletePnrPsg(i);
                  }
                }
              }
            }
          }
        },
        () => {
          this.hideLoading();
        }
      );
    },
    deletePnrPsg: function (index) {
      this.pnr.passengers.splice(index, 1);
    },
    deletePnrFlt: function (index) {
      this.pnr.flights.splice(index, 1);
    },
    inputPnr: function () {
      this.inputMode = 1;
      this.pnr = {
        pnrNo: "",
        flights: [],
        passengers: [],
      };
      this.addPnrFlt();
      this.addPnrPsg();

      this.editing = true;
    },
    addPnrFlt: function () {
      this.pnr.flights.push({
        flight: {
          flightNo: "",
          ddate: "",
          subclass: "",
          dport: "",
          dterm: "",
          aport: "",
          aterm: "",
          dtime: "",
          atime: "",
        },
      });
    },
    addPnrPsg: function () {
      this.pnr.passengers.push({
        selected: true,
        psgName: "",
        idNo: "",
        idType: "",
        mobile: "",
      });
    },
    reset: function () {
      // body...
      this.pnrDetail = "";
      this.pnr = null;

      this.inputMode = 0;
    },
    selectAllPsg: function () {
      if (this.pnr === null) {
        return;
      }
      for (const psg of this.pnr.passengers) {
        psg.selected = true;
      }
    },
    unselectAllPsg: function () {
      if (this.pnr === null) {
        return;
      }
      for (const psg of this.pnr.passengers) {
        psg.selected = false;
      }
    },
    getOriginalOrderDetail: function (orderId) {
      searchOrderDetail(orderId, (v) => {
        // console.log(v)
        this.pnr.pnrNo = v.oldPnrNo;
        this.monitoring = v.monitoring;
        this.dayAndNight = v.dayAndNight;
        this.intlTicket = v.intlTicket;
        this.authOfficeNo = v.authOfficeNo;
        this.remark = v.remark;

        this.pnr.passengers.splice(0);
        for (const psg0 of v.passengers) {
          console.log(psg0);
          const psg = {
            selected: true,
            psgName: psg0.name,
            idNo: psg0.idNo,
            idType: psg0.idType,
            mobile: psg0.mobile,
          };
          this.pnr.passengers.push(psg);
        }

        this.pnr.flights.splice(0);
        for (const flt0 of v.flights) {
          const flt2 = flt0.flight;
          console.log(flt2);
          const flt = {
            flight: {
              flightNo: flt2.flightNo,
              ddate: flt2.departureDate,
              subclass: flt2.subclass,
              dport: flt2.departureAirport,
              aport: flt2.arrivalAirport,
            },
          };
          this.pnr.flights.push(flt);
        }
      });
    },
  },
};
// 585
</script>
